<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Vue-组件化编程 | C·辰</title><meta name="author" content="辰"><meta name="copyright" content="辰"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Vue渐进式框架">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue-组件化编程">
<meta property="og:url" content="http://example.com/2023/04/06/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/index.html">
<meta property="og:site_name" content="C·辰">
<meta property="og:description" content="Vue渐进式框架">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/vues.jpeg">
<meta property="article:published_time" content="2023-04-06T09:08:42.000Z">
<meta property="article:modified_time" content="2023-08-11T12:35:06.771Z">
<meta property="article:author" content="辰">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/vues.jpeg"><link rel="shortcut icon" href="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Bell.ico"><link rel="canonical" href="http://example.com/2023/04/06/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue-组件化编程',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-08-11 20:35:06'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog%2Fimages%2Favatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">32</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">28</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> Demo</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/c2c_shop/"><i class="fa-fw fa fa-comments-o"></i><span> 商城</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/vues.jpeg')"><nav id="nav"><span id="blog-info"><a href="/" title="C·辰"><span class="site-name">C·辰</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> Demo</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/c2c_shop/"><i class="fa-fw fa fa-comments-o"></i><span> 商城</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue-组件化编程</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-04-06T09:08:42.000Z" title="发表于 2023-04-06 17:08:42">2023-04-06</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-08-11T12:35:06.771Z" title="更新于 2023-08-11 20:35:06">2023-08-11</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/front-end/">front-end</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">7.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>34分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue-组件化编程"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="文档"><a href="#文档" class="headerlink" title="文档"></a>文档</h1><blockquote>
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/">Mdn Web 文档</a></p>
<p><a target="_blank" rel="noopener" href="https://v2.cn.vuejs.org/v2/guide/">Vue2文档</a></p>
<p><a target="_blank" rel="noopener" href="https://www.yuque.com/cessstudy/kak11d">md教程文档</a></p>
<p><a target="_blank" rel="noopener" href="https://www.npmjs.com/">库(npm)</a></p>
</blockquote>
<hr>
<h1 id="Vue组件化编程"><a href="#Vue组件化编程" class="headerlink" title="Vue组件化编程"></a>Vue组件化编程</h1><h1 id="开发常用"><a href="#开发常用" class="headerlink" title="开发常用"></a>开发常用</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//delete - ask</span></span><br><span class="line">confirm</span><br><span class="line"></span><br><span class="line"><span class="comment">//提示框</span></span><br><span class="line">alert</span><br><span class="line"></span><br><span class="line"><span class="comment">//当前实例</span></span><br><span class="line">event.<span class="property">target</span>.<span class="property">value</span>/checked</span><br><span class="line"><span class="comment">//值</span></span><br><span class="line">$event</span><br><span class="line"></span><br><span class="line"><span class="comment">//遍历 </span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">forEach</span>(<span class="function">(<span class="params">c</span>)=&gt;</span>&#123;</span><br><span class="line">     <span class="keyword">if</span>(c.<span class="property">name</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//ES6 -- 条件统计-- reduce</span></span><br><span class="line"><span class="comment">// 统计初始值为0，长度为n则被调用几次,pre：上一次值，current:当前值</span></span><br><span class="line"><span class="comment">// 继续调用，则pre为上一次reduce的return值</span></span><br><span class="line"><span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">todos</span>.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre,current</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> pre + (current.<span class="property">done</span>? <span class="number">1</span> : <span class="number">0</span>)</span><br><span class="line"> &#125;,<span class="number">0</span>)</span><br><span class="line">    </span><br><span class="line"><span class="comment">//实例销毁</span></span><br><span class="line"><span class="variable language_">this</span>.$destroy()</span><br><span class="line"></span><br><span class="line"><span class="comment">//声明原生dom事件</span></span><br><span class="line">@click.<span class="property">native</span></span><br><span class="line">    </span><br><span class="line"><span class="comment">//数据占位--不使用</span></span><br><span class="line"><span class="title function_">demmo</span>(<span class="params"><span class="string">&#x27;_&#x27;</span>,b</span>)&#123;&#125;</span><br><span class="line">    </span><br><span class="line"><span class="comment">//.trim 去除头尾空白符</span></span><br><span class="line">    </span><br><span class="line"><span class="comment">//函数</span></span><br><span class="line"><span class="attr">chen</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line"><span class="title function_">chen</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">    </span><br><span class="line"><span class="comment">//nanoid 随机生成id</span></span><br><span class="line"><span class="comment">//安装 npm i nanoid  --&gt;import &#123; nanoid &#125; from &#x27;nanoid&#x27;</span></span><br><span class="line">    <span class="attr">id</span>:<span class="title function_">nanoid</span>()</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<h1 id="脚手架"><a href="#脚手架" class="headerlink" title="脚手架"></a>脚手架</h1><p><strong>#安装</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install -g @vue/cli</span><br><span class="line"><span class="comment"># OR</span></span><br><span class="line">yarn global add @vue/cli</span><br><span class="line"><span class="comment">#淘宝镜像</span></span><br><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org/npm config <span class="built_in">set</span> registry</span><br></pre></td></tr></table></figure>



<br/>

<p><strong>#版本</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">vue --version</span><br><span class="line">vue -V</span><br></pre></td></tr></table></figure>

<br/>

<p><strong>#创建项目</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">vue create <span class="string">&quot;Demo_name&quot;</span></span><br></pre></td></tr></table></figure>

<br/>

<p><strong>#运行</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment">#VsCode open folder  cd/cd..</span></span><br><span class="line">    npm run serve</span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h1 id="脚手架文件结构"><a href="#脚手架文件结构" class="headerlink" title="脚手架文件结构"></a>脚手架文件结构</h1><p>   ├── node_modules<br>   ├── public<br>   │   ├── favicon.ico: 页签图标<br>   │   └── index.html: 主页面<br>   ├── src<br>   │   ├── assets: 存放静态资源<br>   │   │   └── logo.png<br>   │   │── component: 存放组件<br>   │   │   └── HelloWorld.vue<br>   │   │── App.vue: 汇总所有组件<br>   │   │── main.js: 入口文件<br>   ├── .gitignore: git版本管制忽略的配置<br>   ├── babel.config.js: babel的配置文件<br>   ├── package.json: 应用包配置文件<br>   ├── README.md: 应用描述文件<br>   ├── package-lock.json：包版本控制文件</p>
<p><br /> <br /> </p>
<hr>
<h1 id="非单文件组件"><a href="#非单文件组件" class="headerlink" title="非单文件组件"></a>非单文件组件</h1><p><strong>Vue中使用组件的三大步骤：</strong></p>
<ul>
<li>​    一、定义组件（创建组件）</li>
</ul>
<blockquote>
<p>使用:<strong style="color:blue">Vue.extend(options)</strong>创建，其中options.和new Vue(options)时传入的那个options.几乎一样，但也有点区别：</p>
<p>区别如下：</p>
<p>​	1.e1不要写，为什么?—–最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器。</p>
<p>​	2.data必须写成函数，为什么？避免组件被复用时，数据存在引用关系。  data(){ }</p>
<p>​	备注：使用template可以配置组件结构。</p>
</blockquote>
 <br />

<ul>
<li>​    二、注册组件</li>
</ul>
<blockquote>
<p>1.:<strong style="color:blue">局部注册</strong>：靠new Vue的时候传入components选项</p>
<p>2.:<strong style="color:blue">全局注册</strong>：靠Vue.component(‘组件名’，组件)</p>
</blockquote>
 <br />

<ul>
<li>​    三、使用组件（写组件标签）<br>​			编写组件标签：&lt; school&gt;&lt; &#x2F;school&gt;  <br/></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root2&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">hello</span>&gt;</span><span class="tag">&lt;/<span class="name">hello</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">school</span>&gt;</span><span class="tag">&lt;/<span class="name">school</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">student</span>&gt;</span><span class="tag">&lt;/<span class="name">student</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-text</span>=<span class="string">&quot;chen&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">student</span>&gt;</span><span class="tag">&lt;/<span class="name">student</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;root2&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">hello</span>&gt;</span><span class="tag">&lt;/<span class="name">hello</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">     <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">         <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//1.创建组件</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//2.注册组件</span></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//3.编写组件标签</span></span></span><br><span class="line"><span class="language-javascript">        </span></span><br><span class="line"><span class="language-javascript">         <span class="comment">//创建school组件</span></span></span><br><span class="line"><span class="language-javascript">         <span class="keyword">const</span> school =<span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 模板结构</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">template</span>:<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;h2&gt;学校名称：&#123;&#123;name&#125;&#125;&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;h2&gt;学校地址：&#123;&#123;address&#125;&#125;&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;h2&gt;学校号码：&#123;&#123;number&#125;&#125;&lt;/h2&gt;    </span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            `</span>,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 组件不需要写el配置项，最后要被c实例隔离，由c决定服务哪个容器</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">data</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">name</span>:<span class="string">&#x27;广东东软学院&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">address</span>:<span class="string">&#x27;广东佛山&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">number</span>:<span class="string">&#x27;999&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125; </span></span><br><span class="line"><span class="language-javascript">         &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">         <span class="comment">//创建student组件</span></span></span><br><span class="line"><span class="language-javascript">         <span class="keyword">const</span> student =<span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">template</span>:<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;h2&gt;学生名字：&#123;&#123;name&#125;&#125;&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;h2&gt;学生地址：&#123;&#123;address&#125;&#125;&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;h2&gt;学生号码：&#123;&#123;number&#125;&#125;&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            `</span>,</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">            <span class="comment">// 组件不需要写el配置项，最后要被c实例隔离，由c决定服务哪个容器</span></span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">data</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">name</span>:<span class="string">&#x27;辰呀&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">address</span>:<span class="string">&#x27;广东佛山&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">number</span>:<span class="string">&#x27;9981&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125; </span></span><br><span class="line"><span class="language-javascript">         &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//创建全局hello组件</span></span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">const</span> hello=<span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">template</span>:<span class="string">`</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;div&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                    &lt;h2&gt;CP--&#123;&#123;name&#125;&#125;&lt;/h2&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">                &lt;/div&gt;</span></span></span><br><span class="line"><span class="string"><span class="language-javascript">            `</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="title function_">data</span>(<span class="params"></span>)&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="language-javascript">                    <span class="attr">name</span>:<span class="string">&#x27;Liu&#x27;</span></span></span><br><span class="line"><span class="language-javascript">                &#125;</span></span><br><span class="line"><span class="language-javascript">            &#125;</span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">        <span class="comment">//   全局组件注册</span></span></span><br><span class="line"><span class="language-javascript">        <span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;hello&#x27;</span>,hello)</span></span><br><span class="line"><span class="language-javascript">         <span class="keyword">var</span> c= <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">             <span class="attr">el</span>:<span class="string">&#x27;#root&#x27;</span>,</span></span><br><span class="line"><span class="language-javascript">            <span class="comment">//  注册组件(局部注册)--key:value</span></span></span><br><span class="line"><span class="language-javascript">            <span class="attr">data</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">chen</span>:<span class="number">99</span></span></span><br><span class="line"><span class="language-javascript">            &#125;,</span></span><br><span class="line"><span class="language-javascript">             <span class="attr">components</span>:&#123;</span></span><br><span class="line"><span class="language-javascript">                <span class="comment">// xuexiao:school</span></span></span><br><span class="line"><span class="language-javascript">                <span class="attr">school</span>:school,</span></span><br><span class="line"><span class="language-javascript">                <span class="attr">student</span>:student</span></span><br><span class="line"><span class="language-javascript">             &#125;</span></span><br><span class="line"><span class="language-javascript">          &#125;)</span></span><br><span class="line"><span class="language-javascript">        <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span><br><span class="line"><span class="language-javascript">            <span class="attr">el</span>:<span class="string">&#x27;#root2&#x27;</span></span></span><br><span class="line"><span class="language-javascript">        &#125;)</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">     </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h1 id="ref-id替代者-–绑定Dom"><a href="#ref-id替代者-–绑定Dom" class="headerlink" title="ref (id替代者)–绑定Dom"></a>ref (id替代者)–绑定Dom</h1><p><strong>#ref属性</strong>	</p>
<ol>
<li><p>被用来给元素或子件注册引用信息(id的替代者)</p>
</li>
<li><p>应用在htm1标签上获取的是真实D0M元素，应用在组件标签上是组件实例对象(vc)</p>
</li>
<li><p>使用方式：</p>
<blockquote>
<p>打标识：&lt; h1 ref&#x3D;”Xxx”&#x2F;&gt; 或&lt; Schoo ref&#x3D;”Xx”&#x2F;&gt;</p>
<p>获取：this.$refs,xxxxx</p>
<p>获取值：const c&#x3D; this.$refs.Xxx.innerText</p>
</blockquote>
 <br /></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;h1 v-text=<span class="string">&quot;chen&quot;</span> id=<span class="string">&quot;title&quot;</span>&gt;&lt;/h1&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string">&quot;chen&quot;</span> <span class="attr">ref</span>=<span class="string">&quot;title&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;log&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="attr">name</span>:<span class="string">&#x27;App&#x27;</span>,</span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">chen</span>: <span class="string">&#x27;辰呀&#x27;</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">components</span>:&#123;</span><br><span class="line">        <span class="title class_">School</span>,</span><br><span class="line">        <span class="title class_">Student</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">methods</span>:&#123;</span><br><span class="line">        <span class="title function_">log</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="comment">//绑定dom</span></span><br><span class="line">            <span class="keyword">const</span> cc=<span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">title</span></span><br><span class="line">            cc.<span class="property">style</span>.<span class="property">color</span>=<span class="string">&quot;blue&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h1 id="关于不同版本的Vue"><a href="#关于不同版本的Vue" class="headerlink" title="关于不同版本的Vue"></a>关于不同版本的Vue</h1><p><strong>vue.js与vue.runtime.xxx.js的区别：</strong></p>
<blockquote>
<ol>
<li>vue.js是完整版的Vue，包含：核心功能 + 模板解析器。</li>
<li>vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。</li>
<li>因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用<strong>render函数</strong>接收到的createElement函数去指定具体内容。</li>
</ol>
</blockquote>
<p><br /> <br /> </p>
<hr>
<h1 id="vue-config-js配置文件"><a href="#vue-config-js配置文件" class="headerlink" title="vue.config.js配置文件"></a>vue.config.js配置文件</h1><ol>
<li>使用vue inspect &gt; output.js可以查看到Vue脚手架的默认配置。</li>
<li>使用vue.config.js可以对脚手架进行个性化定制，详情见：<a target="_blank" rel="noopener" href="https://cli.vuejs.org/zh">https://cli.vuejs.org/zh</a></li>
</ol>
<p><br /> <br /> </p>
<hr>
<h1 id="组件间通讯"><a href="#组件间通讯" class="headerlink" title="组件间通讯"></a>组件间通讯</h1><br />

<br /> 

<h2 id="一、props-–-跨组件传数据"><a href="#一、props-–-跨组件传数据" class="headerlink" title="一、props – 跨组件传数据"></a>一、props – 跨组件传数据</h2><ol>
<li><p>功能：让组件接收外部传过来的数据</p>
<blockquote>
<p>(1).父组件 &#x3D;&#x3D;&gt; 子组件 通信</p>
<p>(2).子组件 &#x3D;&#x3D;&gt; 父组件 通信（要求父先给子一个函数）</p>
<p>(3).使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！</p>
<p>(4).props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。</p>
</blockquote>
   <br /> 
</li>
<li><p>传递数据：<code>&lt;Demo name=&quot;xxx&quot;/&gt;</code></p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;!--整型传值 v-bind=“value” --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">School</span> <span class="attr">name</span>=<span class="string">&quot;广东东软学院&quot;</span> <span class="attr">address</span>=<span class="string">&quot;广东佛山&quot;</span>  <span class="attr">:numberc</span>=<span class="string">&quot;10999&quot;</span>/&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;!--接收-组件内无需定义 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; name &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; address &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; number &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<br /> 

<ol>
<li><p>接收数据（子）：</p>
<ul>
<li>第一种方式（只接收）：<code>props:[&#39;name&#39;] </code></li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 第一种：简单接收     --   常用</span></span><br><span class="line"><span class="attr">props</span>:[<span class="string">&#x27;name&#x27;</span>,<span class="string">&#x27;address&#x27;</span>,<span class="string">&#x27;numberc&#x27;</span>]</span><br></pre></td></tr></table></figure>

<br /> 

<ul>
<li>第二种方式（限制类型）：<code>props:&#123;name:String&#125;</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">props</span>:&#123;</span><br><span class="line"> <span class="attr">name</span>:&#123;</span><br><span class="line">     <span class="attr">type</span>:<span class="title class_">String</span>, <span class="comment">//类型</span></span><br><span class="line">     <span class="attr">required</span>:<span class="literal">true</span>, <span class="comment">//必要性</span></span><br><span class="line">     <span class="attr">default</span>:<span class="string">&#x27;老王&#x27;</span> <span class="comment">//默认值</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">number</span>:&#123;</span><br><span class="line">     <span class="attr">type</span>:<span class="title class_">Number</span>,</span><br><span class="line">     <span class="attr">default</span>:<span class="number">199</span>     <span class="comment">//默认值</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br /> 

<ul>
<li>第三种方式（限制类型、限制必要性、指定默认值）：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">props</span>:&#123;</span><br><span class="line"> <span class="attr">name</span>:&#123;</span><br><span class="line">     <span class="attr">type</span>:<span class="title class_">String</span>, <span class="comment">//类型</span></span><br><span class="line">     <span class="attr">required</span>:<span class="literal">true</span>, <span class="comment">//必要性</span></span><br><span class="line">     <span class="attr">default</span>:<span class="string">&#x27;老王&#x27;</span> <span class="comment">//默认值</span></span><br><span class="line"> &#125;,</span><br><span class="line"> <span class="attr">number</span>:&#123;</span><br><span class="line">     <span class="attr">type</span>:<span class="title class_">Number</span>,</span><br><span class="line">     <span class="attr">default</span>:<span class="number">199</span>     <span class="comment">//默认值</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<blockquote>
<p>备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。</p>
</blockquote>
<br/>

<p>​		<strong>如需修改，设置中转变量</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">  <span class="title function_">data</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="keyword">return</span>&#123;</span><br><span class="line">          <span class="attr">number</span>:<span class="variable language_">this</span>.<span class="property">numberc</span>,</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;,</span><br><span class="line"><span class="attr">props</span>:[<span class="string">&#x27;name&#x27;</span>,<span class="string">&#x27;address&#x27;</span>,<span class="string">&#x27;numberc&#x27;</span>]</span><br></pre></td></tr></table></figure>

<p><br /> <br /></p>
<hr>
<h2 id="二、-组件自定义事件-–ref"><a href="#二、-组件自定义事件-–ref" class="headerlink" title="二、*组件自定义事件 –ref"></a>二、*组件自定义事件 –ref</h2><ul>
<li>一种组件间通信的方式，适用于：<strong style="color:red">子组件 &#x3D;&#x3D;&#x3D;&gt; 父组件</strong></li>
<li>使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。<br /></li>
<li><strong>（第一种写法，使用@或v-on）（第二种写法，使用 ref 需要触发 emit ）</strong>，</li>
</ul>
<br />

<h3 id="1、-v-on-name-x3D-’name’"><a href="#1、-v-on-name-x3D-’name’" class="headerlink" title="1、   v-on :name&#x3D;’name’  "></a>1、 <strong style="color:blue">  v-on :name&#x3D;’name’  </strong></h3><ul>
<li><p>​	父组件设置给子组件绑定一个自定义事件，在<strong>methods</strong>中配置接收参数和数据处理方法</p>
</li>
<li><p>​	使用ref,需要在钩子中绑定自定义事件然后被等待调用 – </p>
</li>
<li><p>​	this.$refs.refs名.$on（’自定义事件名‘，回调）</p>
</li>
</ul>
<br />

<ul>
<li><p>第一种写法，使用<strong style="color:blue">  @  &#x2F;  v-on</strong></p>
<p>父组件：</p>
</li>
</ul>
<blockquote>
<p>通过父组件给子组件传递函数类型的<strong>props</strong>实现：子给父传递数据</p>
<p>通过父组件给子组件给子组件绑定一个自定义事件实现：子给父传递数据（<strong>使用 @ 或 v-on</strong>）</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;<span class="title class_">School</span> :getSchoolName=<span class="string">&quot;getSchoolName&quot;</span>/&gt;</span><br><span class="line"></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">Student</span> <span class="attr">v-on:chen</span>=<span class="string">&quot;getStudentName&quot;</span>/&gt;</span></span></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">Student</span> @<span class="attr">chen.once</span>=<span class="string">&quot;getStudentName&quot;</span>/&gt;</span></span></span><br><span class="line"></span><br><span class="line">   <span class="attr">methods</span>:&#123;</span><br><span class="line">       <span class="title function_">getSchoolName</span>(<span class="params">name</span>)&#123;</span><br><span class="line">         <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;App收到了学校名：&#x27;</span>,name);</span><br><span class="line">       &#125;,</span><br><span class="line">       <span class="comment">// getStudentName(name,x,y)&#123;console.log(&#x27;App收到了学生名：&#x27;,name,x,y)&#125;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">// 除了name,剩余包装到params数组中</span></span><br><span class="line">       <span class="title function_">getStudentName</span>(<span class="params">name,...params</span>)&#123;</span><br><span class="line">         <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;App收到了学生名：&#x27;</span>,name,params)</span><br><span class="line">       &#125;</span><br><span class="line">     &#125;,</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>子组件 使用 <strong style="color:blue">$emit  </strong> 触发该自定义事件</li>
</ul>
<br />

<br />

<h3 id="2、-ref"><a href="#2、-ref" class="headerlink" title="2、  ref"></a>2、<strong style="color:blue">  ref</strong></h3><blockquote>
<p>使用 <strong style="color:blue"> ref </strong></p>
<p>通过父组件给子组件给子组件<strong style="color:blue"> ref </strong>绑定一个自定义事件实现：子给父传递数据</p>
<p>父组件<strong>在钩子中</strong>绑定自定义事件** – <strong style="color:blue">this.$refs.refs名.$on（’自定义事件名‘，methods函数）</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;<span class="title class_">Student</span> ref=<span class="string">&quot;studentc&quot;</span>/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//钩子中写（第二种写法，使用ref）</span></span><br><span class="line">  <span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">//this.$refs.refs名.$on（’自定义事件名‘，methods函数）</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">studentc</span>.$on(<span class="string">&#x27;chen&#x27;</span>,<span class="variable language_">this</span>.<span class="property">getStudentName</span>)<span class="comment">//绑定自定义事件</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">studentc</span>.$on(<span class="string">&#x27;chen&#x27;</span>,<span class="variable language_">this</span>.<span class="property">getStudentName</span>)<span class="comment">//绑定自定义事情（一次性）</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>子组件 使用 <strong style="color:blue">$emit  </strong> 触发该自定义事件</p>
<br />

<br /></li>
</ul>
<h3 id="2、-触发-emit"><a href="#2、-触发-emit" class="headerlink" title="2、 触发   $emit "></a>2、 触发   <strong style="color:blue">$emit </strong></h3><p>无论是使用<strong style="color:blue">  v-on :name&#x3D;’name’  </strong>还是使用 <strong style="color:blue"> ref </strong>，子组件都是通过 <strong style="color:blue"> $emit  </strong>进行触发自定义事件 : <strong style="color:blue">  this.$emit(‘chen’,value) </strong></p>
<blockquote>
<ul>
<li>传递多个数据使用 funcation_name(<strong>name,…params</strong>):除了name,剩余数据包装到<strong>params数组</strong>中</li>
</ul>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;button @click=<span class="string">&quot;sendSchoolName&quot;</span>&gt;传递学校名给<span class="title class_">App</span>&lt;/button&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;sendStudentName&quot;</span>&gt;</span>传递学生名给App<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">     <span class="title function_">sendSchoolName</span>(<span class="params"></span>)&#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="title function_">getSchoolName</span>(<span class="variable language_">this</span>.<span class="property">name</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">     <span class="title function_">sendStudentName</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="comment">//触发student组件实例上的chen事件</span></span><br><span class="line">     <span class="variable language_">this</span>.$emit(<span class="string">&#x27;chen&#x27;</span>,<span class="variable language_">this</span>.<span class="property">name</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>)</span><br><span class="line">     &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br />

<br /> 

<h3 id="3、解绑-–-off"><a href="#3、解绑-–-off" class="headerlink" title="3、解绑 – $off"></a>3、解绑 – <strong style="color:blue">$off</strong></h3><p>子组件中设置解绑组件实例上的name事件</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">   <span class="comment">//解绑student组件实例上的chen事件</span></span><br><span class="line">   <span class="title function_">unbindcc</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="variable language_">this</span>.$off(<span class="string">&#x27;chen&#x27;</span>);<span class="comment">//解绑一个自定义事件</span></span><br><span class="line">      <span class="variable language_">this</span>.$off([<span class="string">&#x27;chen&#x27;</span>,<span class="string">&#x27;demo&#x27;</span>]);<span class="comment">//解绑多个自定义事件</span></span><br><span class="line">      <span class="variable language_">this</span>.$off();<span class="comment">//解绑全部自定义事件</span></span><br><span class="line">      &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h2 id="三、数据传递-–-子传父"><a href="#三、数据传递-–-子传父" class="headerlink" title="三、数据传递 – 子传父"></a>三、数据传递 – 子传父</h2><p><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/image-20230406204630440.png" alt="image-20230406204630440"></p>
<ul>
<li>父组件在methods里面设置一个<strong style="color:blue">函数</strong>，函数获取调用值，通过v-bind<strong>把函数传递到子组件</strong>，子组件把要传的值写入该函数的形参中通过<strong>传递地址修改</strong>值实现</li>
</ul>
<blockquote>
<p>父组件：</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;<span class="title class_">MyHeader</span> :receivea=<span class="string">&quot;receivec&quot;</span>/&gt;</span><br><span class="line">         </span><br><span class="line">     <span class="title function_">data</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="keyword">return</span>&#123;</span><br><span class="line">                <span class="attr">todos</span>:[&#123;<span class="attr">id</span>:<span class="string">&#x27;01&#x27;</span>,<span class="attr">title</span>:<span class="string">&#x27;学习&#x27;</span>,<span class="attr">done</span>:<span class="literal">true</span>&#125;,]</span><br><span class="line">            &#125;&#125;,</span><br><span class="line">                 </span><br><span class="line">      <span class="attr">methods</span>:&#123;</span><br><span class="line">        <span class="title function_">receivec</span>(<span class="params">todoObj</span>)&#123;</span><br><span class="line">             <span class="comment">//接收</span></span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">todos</span>.<span class="title function_">unshift</span>(todoObj)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br></pre></td></tr></table></figure>

 <br />

<blockquote>
<p>子组件:</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">props</span>:[<span class="string">&#x27;receivea&#x27;</span>],</span><br><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">    <span class="title function_">add</span>(<span class="params">e</span>)&#123;</span><br><span class="line">        <span class="comment">// 将用户输入的内容包装成一个对象</span></span><br><span class="line">        <span class="comment">// console.log(event.target.value);</span></span><br><span class="line">        <span class="keyword">const</span> todoObj = &#123;<span class="attr">id</span>:<span class="title function_">nanoid</span>(),<span class="attr">title</span>:e.<span class="property">target</span>.<span class="property">value</span>,<span class="attr">done</span>:<span class="literal">false</span>&#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">//传递</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">receive</span>(todoObj)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><br />		<br /> </p>
<hr>
<h2 id="四、全局事件总线–bus"><a href="#四、全局事件总线–bus" class="headerlink" title="四、全局事件总线–bus"></a>四、全局事件总线–bus</h2><p><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/image-20230407225625192.png" alt="image-20230407225625192"></p>
<h3 id="1、安装全局事件总线"><a href="#1、安装全局事件总线" class="headerlink" title="1、安装全局事件总线"></a>1、安装全局事件总线</h3><p><strong>main.js</strong></p>
<ul>
<li>安装全局事件总线第一种写法</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Demo</span>=<span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;&#125;)</span><br><span class="line"><span class="keyword">const</span> d=<span class="keyword">new</span> <span class="title class_">Demo</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">c</span>=d</span><br><span class="line"><span class="comment">//调用c</span></span><br></pre></td></tr></table></figure>

<br>

<ul>
<li>（推荐写法）安装全局事件总线</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">  <span class="title function_">beforeCreate</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$bus</span>=<span class="variable language_">this</span>  <span class="comment">// （推荐）安装全局事件总线</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><br /> 		<br /></p>
<h3 id="2、接收数据"><a href="#2、接收数据" class="headerlink" title="2、接收数据"></a>2、接收数据</h3><ul>
<li><p>使用：<strong style="color:blue">this.$bus.$on(‘事件name’,(data)&#x3D;&gt;{ })</strong></p>
</li>
<li><p>绑定事件 </p>
</li>
<li><p><strong>回调</strong>留在组件本身</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">     <span class="title function_">demo</span>(<span class="params">data</span>)&#123;&#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="comment">//①</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;hello&#x27;</span>,<span class="function">(<span class="params">data</span>)=&gt;</span>&#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;School组件接收到的数据为：&#x27;</span>,data)</span><br><span class="line">     &#125;)</span><br><span class="line">     <span class="comment">//②</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;hello&#x27;</span>,<span class="variable language_">this</span>.<span class="property">demo</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br />

<br />

<h3 id="3、提供数据"><a href="#3、提供数据" class="headerlink" title="3、提供数据"></a>3、提供数据</h3><ul>
<li><strong>触发</strong>:<strong style="color:blue">this.$bus.$emit(‘事件name’,data)</strong>  </li>
<li>绑定事件，传值</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">     <span class="title function_">sendStudentName</span>(<span class="params"></span>)&#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">$bus</span>.$emit(<span class="string">&#x27;hello&#x27;</span>,<span class="number">666</span>)</span><br><span class="line">     &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br />

<br />

<h3 id="4、销毁"><a href="#4、销毁" class="headerlink" title="4、销毁"></a>4、销毁</h3><ul>
<li>beforeDestroy钩子中编写销毁方法</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="title function_">beforeDestroy</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">$bus</span>.$off(<span class="string">&#x27;hello&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<hr>
<h2 id="五、消息订阅与发布-（pubsub）"><a href="#五、消息订阅与发布-（pubsub）" class="headerlink" title="五、消息订阅与发布 （pubsub）"></a>五、消息订阅与发布 （pubsub）</h2><ol>
<li><p>一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p>
<br /> 
</li>
<li><p>使用步骤</p>
<p>①<strong>安装pubsub</strong>：</p>
</li>
</ol>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i pubsub-js`</span><br></pre></td></tr></table></figure>

<br />

<p>② 引入</p>
<ul>
<li>哪个组件要使用则要导入</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> pubsub <span class="keyword">from</span> <span class="string">&#x27;pubsub-js&#x27;</span></span><br></pre></td></tr></table></figure>

<br />

<p>③接收数据</p>
<ul>
<li>A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span></li>
<li><strong style="color:blue">this.pubId&#x3D;pubsub.subscribe(‘ccc’,this.demo)</strong></li>
<li><strong style="color:blue">pubId</strong>为订阅id,在取消订阅销毁的时候使用到</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">     <span class="title function_">demo</span>(<span class="params">msgName,value</span>)&#123; &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">//this.pubId=pubsub.subscribe(&#x27;ccc&#x27;,(msgName,value)=&gt;&#123; &#125;)</span></span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">pubId</span>=pubsub.<span class="title function_">subscribe</span>(<span class="string">&#x27;ccc&#x27;</span>,<span class="variable language_">this</span>.<span class="property">demo</span>)<span class="comment">//订阅消息</span></span><br><span class="line">&#125;,</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<br /> 

<p>④.提供数据</p>
<ul>
<li><strong style="color:blue">pubsub.publish(‘xxx’,value)</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">     <span class="title function_">sendStudentName</span>(<span class="params"></span>)&#123;</span><br><span class="line">          pubsub.<span class="title function_">publish</span>(<span class="string">&#x27;ccc&#x27;</span>,value)</span><br><span class="line">     &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br /> 

<p>⑤.<span style="color:red">取消订阅。</span></p>
<ul>
<li>在<strong>beforeDestroy钩子</strong>中</li>
<li>PubSub.unsubscribe(pid)</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="title function_">beforeDestroy</span>(<span class="params"></span>) &#123;</span><br><span class="line">     pubsub.<span class="title function_">unsubscribe</span>(<span class="variable language_">this</span>.<span class="property">pubId</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h1 id="mixin混入-–-共享配置"><a href="#mixin混入-–-共享配置" class="headerlink" title="mixin混入 – 共享配置"></a>mixin混入 – 共享配置</h1><ul>
<li>当数据冲突，原数据为主，src创建混合js</li>
<li>新建js文件并配置数据</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> hunhe = &#123;</span><br><span class="line">     <span class="attr">methods</span>: &#123;</span><br><span class="line">          <span class="title function_">showName</span>(<span class="params"></span>)&#123;</span><br><span class="line">               <span class="title function_">alert</span>(<span class="variable language_">this</span>.<span class="property">name</span>)</span><br><span class="line">          &#125;</span><br><span class="line">     &#125;,</span><br><span class="line">     <span class="title function_">mounted</span>(<span class="params"></span>) &#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好啊！&#x27;</span>)</span><br><span class="line">     &#125;,</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> hunhe2 = &#123;</span><br><span class="line">     <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">          <span class="keyword">return</span> &#123;</span><br><span class="line">               <span class="attr">x</span>:<span class="number">100</span>,</span><br><span class="line">               <span class="attr">y</span>:<span class="number">200</span></span><br><span class="line">          &#125;</span><br><span class="line">     &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br /> 

<ul>
<li><p>引用混合配置</p>
<blockquote>
<p>①引入混合</p>
</blockquote>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;hunhe,hunhe2&#125; <span class="keyword">from</span> <span class="string">&#x27;../mixin&#x27;</span></span><br></pre></td></tr></table></figure>

<br />



<blockquote>
<p>②使用</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"> 	&lt;h2&gt;学校地址：&#123;&#123;x&#125;&#125;&#123;&#123;y&#125;&#125;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">         <span class="keyword">import</span> &#123;hunhe,hunhe2&#125; <span class="keyword">from</span> <span class="string">&#x27;../mixin&#x27;</span></span><br><span class="line">         <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">              <span class="attr">mixins</span>:[hunhe,hunhe2],</span><br><span class="line">         &#125;</span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h1 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h1><ol>
<li><p>功能：用于增强Vue</p>
</li>
<li><p>本质：包含<strong>install</strong>方法的一个对象，install的第一个参数是<strong>Vue</strong>，第二个以后的参数是插件使用者传递的<strong>数据</strong>。</p>
</li>
<li><p>定义插件plugins.js：</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">     <span class="title function_">install</span>(<span class="params">Vue,x,y,z</span>)&#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(x,y,z)</span><br><span class="line">          <span class="comment">//全局过滤器</span></span><br><span class="line">          <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;mySlice&#x27;</span>,<span class="keyword">function</span>(<span class="params">value</span>)&#123;</span><br><span class="line">               <span class="keyword">return</span> value.<span class="title function_">slice</span>(<span class="number">0</span>,<span class="number">4</span>)</span><br><span class="line">          &#125;)</span><br><span class="line"></span><br><span class="line">          <span class="comment">//定义全局指令 -- 获取焦点</span></span><br><span class="line">          <span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;fbind&#x27;</span>,&#123;</span><br><span class="line">               <span class="comment">//指令与元素成功绑定时（一上来）</span></span><br><span class="line">               <span class="title function_">bind</span>(<span class="params">element,binding</span>)&#123;</span><br><span class="line">                    element.<span class="property">value</span> = binding.<span class="property">value</span></span><br><span class="line">               &#125;,</span><br><span class="line">               <span class="comment">//指令所在元素被插入页面时</span></span><br><span class="line">               <span class="title function_">inserted</span>(<span class="params">element,binding</span>)&#123;</span><br><span class="line">                    element.<span class="title function_">focus</span>()</span><br><span class="line">               &#125;,</span><br><span class="line">               <span class="comment">//指令所在的模板被重新解析时</span></span><br><span class="line">               <span class="title function_">update</span>(<span class="params">element,binding</span>)&#123;</span><br><span class="line">                    element.<span class="property">value</span> = binding.<span class="property">value</span></span><br><span class="line">               &#125;</span><br><span class="line">          &#125;)</span><br><span class="line"></span><br><span class="line">          <span class="comment">//定义混入</span></span><br><span class="line">          <span class="title class_">Vue</span>.<span class="title function_">mixin</span>(&#123;</span><br><span class="line">               <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">                    <span class="keyword">return</span> &#123;</span><br><span class="line">                         <span class="attr">x</span>:<span class="number">100</span>,</span><br><span class="line">                         <span class="attr">y</span>:<span class="number">200</span></span><br><span class="line">                    &#125;</span><br><span class="line">               &#125;,</span><br><span class="line">          &#125;)</span><br><span class="line"></span><br><span class="line">          <span class="comment">//给Vue原型上添加一个方法（vm和vc就都能用了）</span></span><br><span class="line">          <span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">hello</span> = <span class="function">()=&gt;</span>&#123;<span class="title function_">alert</span>(<span class="string">&#x27;你好啊&#x27;</span>)&#125;</span><br><span class="line">     &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​	<br /></p>
<p>4.引入并使用插件（main.js）</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> plugins <span class="keyword">from</span> <span class="string">&#x27;./plugins&#x27;</span>	</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(plugins,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>



<p>5.使用插件</p>
<ul>
<li>直接使用插件里面方法的名字即可</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>学校名称：&#123;&#123;name | mySlice&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><br />	 <br />  </p>
<hr>
<h1 id="scoped-样式隔离"><a href="#scoped-样式隔离" class="headerlink" title="scoped 样式隔离"></a>scoped 样式隔离</h1><ul>
<li>在编译的时候，全部组件样式汇总到一起，各组件类名相同时会发生冲突，在App.vue中后引用的组件样式会覆盖上层</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">//Vscode -- vuecss快捷键</span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line"></span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p><br /> <br /> </p>
<hr>
<h1 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h1><ol>
<li><p>存储内容大小一般支持5MB左右（不同浏览器可能还不一样）</p>
<br />
</li>
<li><p>浏览器端通过 Window.sessionStorage（会话，关闭丢失） 和 Window.localStorage 属性来实现本地存储机制。</p>
<br />
</li>
<li><p>相关API：</p>
<p>xxxxxStorage.setItem(‘key’, ‘value’);</p>
</li>
</ol>
<blockquote>
<p>该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> p = &#123;<span class="attr">name</span>:<span class="string">&#x27;张三&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">saveData</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;msg&#x27;</span>,<span class="string">&#x27;hello!!!&#x27;</span>)</span><br><span class="line">     <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;person&#x27;</span>,<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(p))</span><br><span class="line">    sessionStorage.<span class="title function_">setItem</span>(<span class="string">&#x27;person&#x27;</span>,<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(p))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<br />

<ul>
<li>xxxxxStorage.getItem(‘person’)</li>
</ul>
<blockquote>
<p> 该方法接受一个键名作为参数，返回键名对应的值。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">readData</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;msg&#x27;</span>))</span><br><span class="line">     <span class="keyword">const</span> result = <span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&#x27;person&#x27;</span>)</span><br><span class="line">     <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(result))</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br />

<ul>
<li>xxxxxStorage.removeItem(‘key’);</li>
</ul>
<blockquote>
<p>该方法接受一个键名作为参数，并把该键名从存储中删除。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">deleteData</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">localStorage</span>.<span class="title function_">removeItem</span>(<span class="string">&#x27;msg2&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br />

<ul>
<li>xxxxxStorage.clear()</li>
</ul>
<blockquote>
<p>该方法会清空存储中的所有数据。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">deleteAllData</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">localStorage</span>.<span class="title function_">clear</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<br />

<ul>
<li>Vue通过深度监视进行读取本地存储数据进行对vc上的数据进行响应式存储</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">  <span class="attr">watch</span>:&#123;</span><br><span class="line"><span class="comment">// 深度监视</span></span><br><span class="line">    <span class="attr">todos</span>:&#123;</span><br><span class="line">      <span class="attr">deep</span>:<span class="literal">true</span>,</span><br><span class="line">      <span class="title function_">handler</span>(<span class="params">value</span>)&#123;</span><br><span class="line">        <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&#x27;todos&#x27;</span>,<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(value))</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<br />

<br />

<hr>
<h1 id="nextTick"><a href="#nextTick" class="headerlink" title="nextTick"></a>nextTick</h1><p>进行执行代码，如果存在对Dom元素存在修改行为，Vue会执行所有的代码后更新页面Dom。例：执行focus()获取焦点代码后，上部分代码存在修改Dom行为，则执行focus()后所有的代码后页面会被刷新，获取焦点失败。</p>
<br/>

<ol>
<li><p>语法：<strong style="color:blue">this.$nextTick(回调函数)</strong></p>
</li>
<li><p>作用：在下一次 DOM 更新结束后执行其指定的回调。</p>
</li>
<li><p>什么时候用：当<strong>改变数据后</strong>，要基于<strong>更新后的新DOM</strong>进行某些操作时，要在nextTick所指定的回调函数中执行。</p>
</li>
</ol>
<blockquote>
<p>​	解决方法:</p>
<p>​	①使用定时器，等待页面刷新后执行</p>
<p>​	②使用nextTick</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">this</span>.$nextTick(<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">Dom_name</span>.<span class="title function_">focus</span>()<span class="comment">//获取焦点例子</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<br />

<br />

<hr>
<h1 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h1><ul>
<li><p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/animate.css"><strong style="color:blue">动画库animate.css - npm</strong></a></p>
</li>
<li><pre><code class="bash">#第二动画库
npm install vue-kinesis
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">```html</span><br><span class="line">        &lt;kinesis-container&gt;</span><br><span class="line">      Here, you can put</span><br><span class="line">      &lt;kinesis-element :strength=&quot;10&quot;&gt; whatever &lt;/kinesis-element&gt;</span><br><span class="line">      &lt;kinesis-element :strength=&quot;20&quot;&gt; content! &lt;/kinesis-element&gt;</span><br><span class="line">    &lt;/kinesis-container&gt;</span><br></pre></td></tr></table></figure>
</code></pre>
</li>
</ul>
<br />

<ul>
<li>​	原css中设置动画</li>
</ul>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.come</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: chen <span class="number">1s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.go</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: chen <span class="number">1s</span> reverse;<span class="comment">/* 反转 */</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> chen&#123;</span><br><span class="line">    <span class="selector-tag">from</span>&#123;</span><br><span class="line">         <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">100%</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">to</span>&#123;</span><br><span class="line">       <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">0px</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><br/>		<br/></p>
<h2 id="过渡-–-transition"><a href="#过渡-–-transition" class="headerlink" title="过渡 – transition"></a>过渡 – transition</h2><p><strong>标签</strong>：<strong style="color:blue"><transition></strong></p>
<ul>
<li><p><strong style="color:blue">appear</strong>:<strong>初始渲染</strong>加入v-enter-active动画(进入网站)</p>
</li>
<li><p>若有多个元素需要过度，则需要使用：<strong style="color:blue"><transition-group></strong>，且每个元素都要指定<strong style="color:blue">key</strong>值。</p>
</li>
<li><p>元素<strong>进入</strong>的样式：</p>
<blockquote>
<ol>
<li><p><strong style="color:blue">v-enter</strong>：进入的起点</p>
</li>
<li><p><strong style="color:blue">v-enter-active</strong>：进入过程中</p>
</li>
<li><p><strong style="color:blue">v-enter-to</strong>：进入的终点</p>
<br/></li>
</ol>
</blockquote>
</li>
<li><p>元素<strong>离开</strong>的样式：</p>
<blockquote>
<ol>
<li><strong style="color:blue">v-leave</strong>：离开的起点</li>
<li><strong style="color:blue">v-leave-active</strong>：离开过程中</li>
<li><strong style="color:blue">v-leave-to</strong>：离开的终点</li>
</ol>
</blockquote>
</li>
<li><p>通过 <strong>v-show 判断</strong>是否显示该 dom实现动画出现和隐退</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;isShow=!isShow&quot;</span>&gt;</span>显示/隐藏<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span>&gt;</span>你好呀<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>	

<p>css中的动画设置</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.v-enter-active</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: chen <span class="number">1s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.v-leave-active</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: chen <span class="number">1s</span> reverse;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> chen&#123;</span><br><span class="line">    <span class="selector-tag">from</span>&#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">100%</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-tag">to</span>&#123;</span><br><span class="line">        <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">0px</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​	<br/></p>
<ul>
<li>自定义过渡名字 <strong style="color:blue"> <transition name='cc'></strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">&#x27;cc&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span>&gt;</span>你好呀<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>​	css中类名设置：</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.cc-enter-active</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: chen <span class="number">1s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cc-leave-active</span>&#123;</span><br><span class="line">    <span class="attribute">animation</span>: chen <span class="number">1s</span> reverse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<h2 id="封装过渡"><a href="#封装过渡" class="headerlink" title="封装过渡"></a>封装过渡</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition-group</span> <span class="attr">name</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">appear</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;!isShow&quot;</span> <span class="attr">key</span>=<span class="string">&quot;1&quot;</span>&gt;</span>你好啊！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span> <span class="attr">key</span>=<span class="string">&quot;2&quot;</span>&gt;</span>尚硅谷！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition-group</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 进入的起点、离开的终点 */</span></span><br><span class="line"><span class="selector-class">.hello-enter</span>,<span class="selector-class">.hello-leave-to</span>&#123;</span><br><span class="line">     <span class="attribute">transform</span>: <span class="built_in">translateX</span>(-<span class="number">100%</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hello-enter-active</span>,<span class="selector-class">.hello-leave-active</span>&#123;</span><br><span class="line">     <span class="attribute">transition</span>: <span class="number">0.5s</span> linear;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 进入的终点、离开的起点 */</span></span><br><span class="line"><span class="selector-class">.hello-enter-to</span>,<span class="selector-class">.hello-leave</span>&#123;</span><br><span class="line">     <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<h2 id="封装动画"><a href="#封装动画" class="headerlink" title="封装动画"></a>封装动画</h2><ul>
<li>#安装第三方库</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install animate.css --save</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>在组件中引入</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">&#x27;animate.css&#x27;</span></span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>按照库的要求编写 (name、进入：enter-active-class、隐退：leave-active-class)</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition-group</span> <span class="attr">appear</span></span></span><br><span class="line"><span class="tag">	<span class="attr">name</span>=<span class="string">&quot;animate__animated animate__bounce&quot;</span> </span></span><br><span class="line"><span class="tag">	<span class="attr">enter-active-class</span>=<span class="string">&quot;animate__swing&quot;</span></span></span><br><span class="line"><span class="tag">	<span class="attr">leave-active-class</span>=<span class="string">&quot;animate__backOutUp&quot;</span>&gt;</span></span><br><span class="line">&gt;</span><br><span class="line">	<span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;!isShow&quot;</span> <span class="attr">key</span>=<span class="string">&quot;1&quot;</span>&gt;</span>你好啊！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">&quot;isShow&quot;</span> <span class="attr">key</span>=<span class="string">&quot;2&quot;</span>&gt;</span>尚硅谷！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition-group</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<hr>
<h1 id="vue脚手架配置代理-–-axios"><a href="#vue脚手架配置代理-–-axios" class="headerlink" title="vue脚手架配置代理  – axios"></a>vue脚手架配置代理  – axios</h1><br/>

<blockquote>
<ul>
<li><a target="_blank" rel="noopener" href="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/server/server1.js">自定义服务器1</a></li>
<li><a target="_blank" rel="noopener" href="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/server/server2.js">自定义服务器2</a></li>
<li>启动服务器</li>
</ul>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">node server</span><br></pre></td></tr></table></figure>



<h2 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h2><ul>
<li>下载axios</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i axios</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>当前组件引用</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">import axios from <span class="string">&#x27;axios&#x27;</span></span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>在 <strong>vue.config.js</strong> 文件中添加如下配置：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">devServer</span>:&#123;</span><br><span class="line">       <span class="attr">proxy</span>:<span class="string">&quot;http://localhost:5000&quot;</span></span><br><span class="line">     &#125;</span><br><span class="line"></span><br><span class="line">     <span class="comment">//App</span></span><br><span class="line">     <span class="title function_">getStudents</span>(<span class="params"></span>)&#123;</span><br><span class="line">          axios.<span class="title function_">get</span>(<span class="string">&#x27;http://localhost:8080/students&#x27;</span>).<span class="title function_">then</span>(</span><br><span class="line">               <span class="function"><span class="params">response</span> =&gt;</span> &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请求成功了&#x27;</span>,response.<span class="property">data</span>);&#125;,</span><br><span class="line">               <span class="function"><span class="params">error</span> =&gt;</span> &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请求失败了&#x27;</span>,error.<span class="property">message</span>);&#125;</span><br><span class="line">               )</span><br><span class="line">     &#125;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<ol>
<li>优点：配置简单，请求资源时直接发给前端（8080）即可。</li>
<li>缺点：不能配置多个代理，不能灵活的控制请求是否走代理。</li>
<li>工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）</li>
</ol>
</blockquote>
<br/>

<br/>

<h2 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h2><br/>

<p>  编写 **vue.config.js **配置具体代理规则：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">   <span class="attr">devServer</span>: &#123;</span><br><span class="line">      <span class="attr">proxy</span>: &#123;</span><br><span class="line">      <span class="string">&#x27;/chen&#x27;</span>: &#123;<span class="comment">// 匹配所有以 &#x27;/api1&#x27;开头的请求路径</span></span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;http://localhost:5000&#x27;</span>,<span class="comment">// 代理目标的基础路径</span></span><br><span class="line">        <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">pathRewrite</span>: &#123;<span class="string">&#x27;^/chen&#x27;</span>: <span class="string">&#x27;&#x27;</span>&#125;<span class="comment">// 路径重写</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&#x27;/peng&#x27;</span>: &#123;<span class="comment">// 匹配所有以 &#x27;/api2&#x27;开头的请求路径</span></span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;http://localhost:5001&#x27;</span>,<span class="comment">// 代理目标的基础路径</span></span><br><span class="line">        <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">pathRewrite</span>: &#123;<span class="string">&#x27;^/peng&#x27;</span>: <span class="string">&#x27;&#x27;</span>&#125;<span class="comment">// 路径重写</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>端口欺骗：</p>
<p>​	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000<br>​		changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080<br>​		changeOrigin默认值为true</p>
</blockquote>
<br/>

<ul>
<li>组件中设置</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="title function_">getStudents</span>(<span class="params"></span>)&#123;</span><br><span class="line">         axios.<span class="title function_">get</span>(<span class="string">&#x27;http://localhost:8080/chen/students&#x27;</span>).<span class="title function_">then</span>(</span><br><span class="line">              <span class="function"><span class="params">response</span> =&gt;</span> &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请求成功了&#x27;</span>,response.<span class="property">data</span>);&#125;,</span><br><span class="line">              <span class="function"><span class="params">error</span> =&gt;</span> &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请求失败了&#x27;</span>,error.<span class="property">message</span>);&#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="title function_">getCars</span>(<span class="params"></span>)&#123;</span><br><span class="line">         axios.<span class="title function_">get</span>(<span class="string">&#x27;http://localhost:8080/chen/cars&#x27;</span>).<span class="title function_">then</span>(</span><br><span class="line">              <span class="function"><span class="params">response</span> =&gt;</span> &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请求成功了&#x27;</span>,response.<span class="property">data</span>);&#125;,</span><br><span class="line">              <span class="function"><span class="params">error</span> =&gt;</span> &#123;<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;请求失败了&#x27;</span>,error.<span class="property">message</span>);&#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>说明：</p>
<ol>
<li>优点：可以配置多个代理，且可以灵活的控制请求是否走代理。</li>
<li>缺点：配置略微繁琐，请求资源时必须加前缀。</li>
</ol>
</blockquote>
<p><br/><br/></p>
<hr>
<h1 id="Github案例-–-axios"><a href="#Github案例-–-axios" class="headerlink" title="Github案例  – axios"></a>Github案例  – axios</h1><br/>

<h2 id="调用Github接口"><a href="#调用Github接口" class="headerlink" title="调用Github接口"></a>调用Github<a target="_blank" rel="noopener" href="https://api.github.com/search/users?q=xx">接口</a></h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="title function_">searchUsers</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">// 请求前更新数据</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">$bus</span>.$emit(<span class="string">&#x27;updateListData&#x27;</span>,&#123;<span class="attr">isFirst</span>:<span class="literal">false</span>,<span class="attr">isLoading</span>:<span class="literal">true</span>,<span class="attr">errMsg</span>:<span class="string">&#x27;&#x27;</span>,<span class="attr">users</span>:[]&#125;)</span><br><span class="line">    axios.<span class="title function_">get</span>(<span class="string">`https://api.github.com/search/users?q=<span class="subst">$&#123;<span class="variable language_">this</span>.$keyword&#125;</span>`</span>).<span class="title function_">then</span>(</span><br><span class="line">        <span class="function"><span class="params">response</span>=&gt;</span>&#123;</span><br><span class="line">            <span class="comment">// console.log(&quot;请求成功&quot;,response.data.items)</span></span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">$bus</span>.$emit(<span class="string">&#x27;updateListData&#x27;</span>,&#123;<span class="attr">isLoading</span>:<span class="literal">false</span>,<span class="attr">errMsg</span>:<span class="string">&#x27;&#x27;</span>,<span class="attr">users</span>:response.<span class="property">data</span>.<span class="property">items</span>&#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="function"><span class="params">error</span>=&gt;</span>&#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;请求失败&quot;</span>,error.<span class="property">message</span>);</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">$bus</span>.$emit(<span class="string">&#x27;updateListData&#x27;</span>,&#123;<span class="attr">isLoading</span>:<span class="literal">false</span>,<span class="attr">errMsg</span>:error.<span class="property">message</span>,<span class="attr">users</span>:[]&#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>拓展运算符  … (解构，数据替换)</li>
<li>接收数据 – 接收对象值dataObj – 与data中的对象info进行比较替换，存在的值则替换为dataOb里面的值</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="title function_">mounted</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="comment">// this.$bus.$on(&#x27;getUsers&#x27;,this.demo)</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">$bus</span>.$on(<span class="string">&#x27;updateListData&#x27;</span>,<span class="function">(<span class="params">dataObj</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">info</span>=&#123;...<span class="variable language_">this</span>.<span class="property">info</span>,...dataObj&#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">data</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">        <span class="attr">info</span>:&#123;</span><br><span class="line">            <span class="attr">isFirst</span>:<span class="literal">true</span>,</span><br><span class="line">            <span class="attr">users</span>:[],</span><br><span class="line">            <span class="attr">isLoading</span>:<span class="literal">false</span>,</span><br><span class="line">            <span class="attr">errMsg</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<hr>
<h1 id="Vue-resource"><a href="#Vue-resource" class="headerlink" title="Vue-resource"></a>Vue-resource</h1><ul>
<li>安装(插件)</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i vue-resource</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>引用(main.js)</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> vueResourcec <span class="keyword">from</span> <span class="string">&#x27;vue-resource</span></span><br><span class="line"><span class="string">     Vue.use(vueResourcec)</span></span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>使用 – 和 axios 使用方法类似</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//使用 -- this.$http.get</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">get</span>(<span class="string">`API`</span>).<span class="title function_">then</span>(</span><br><span class="line">    <span class="function"><span class="params">response</span>=&gt;</span>&#123;&#125;,</span><br><span class="line">    <span class="function"><span class="params">error</span>=&gt;</span>&#123;&#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h1 id="插槽-slot"><a href="#插槽-slot" class="headerlink" title="插槽 slot"></a>插槽 slot</h1><ul>
<li><p>作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 &#x3D;&#x3D;&#x3D;&gt; 子组件</strong> 。</p>
</li>
<li><p>分类：<strong>默认插槽、具名插槽、作用域插槽</strong></p>
</li>
<li><p>使用方式：（在父组件中使用子组件标签不使用自闭合，在标签内插入内容，<strong>在子组件中的slot标签内插入</strong>，如果不传内容则slot自身内的内容为<strong>默认值</strong>）</p>
</li>
</ul>
<br/>

<ol>
<li>默认插槽（在父组件把内容插入到子组件中 solt）</li>
</ol>
<blockquote>
<p>父组件中(不使用自闭合组件标签)</p>
<p>在父组件把内容插入到子组件中 solt</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">Category</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">div</span>&gt;</span>这是一个html结构<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">Category</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<blockquote>
<ul>
<li>子组件：&lt;– 定义插槽 –&gt;</li>
</ul>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;/<span class="name">slot</span>&gt;</span>如果不插入内容则显示这里的内容(插槽默认内容...)<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<br/>

<ol start="2">
<li>具名插槽</li>
</ol>
<blockquote>
<ul>
<li>定义插槽:子组件给  <strong>solt</strong>  设置 <strong style="color:blue">  name  </strong>属性</li>
</ul>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;center&quot;</span>&gt;</span>插槽默认内容...<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>插槽默认内容...<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<blockquote>
<ul>
<li>父组件要插入的内容设置 <strong style="color:blue"> slot&#x3D;”name” </strong> &#x2F;  <strong style="color:blue">v-slot:name</strong>   属性，精确插入</li>
</ul>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">Category</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot</span>=<span class="string">&quot;center&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">div</span>&gt;</span>html结构1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line">     <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:footer</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">div</span>&gt;</span>html结构2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">Category</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<br/>

<ol start="3">
<li>作用域插槽</li>
</ol>
<ul>
<li><p>子组件把 <strong style="color:blue"> 数据传递 </strong>回插槽的使用者（父组件）</p>
<blockquote>
<p>子组件传递数据：<strong style="color:blue"> <slot :name="databname"></slot></strong> </p>
<p>name不必和父组件接收name相同</p>
</blockquote>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">     <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">slot</span> <span class="attr">:games</span>=<span class="string">&quot;games&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">     <span class="attr">name</span>:<span class="string">&#x27;Category&#x27;</span>,</span><br><span class="line">          <span class="comment">//数据在子组件自身</span></span><br><span class="line">          <span class="title function_">data</span>(<span class="params"></span>) &#123;</span><br><span class="line">               <span class="keyword">return</span> &#123;</span><br><span class="line">                    <span class="attr">games</span>:[<span class="string">&#x27;红色警戒&#x27;</span>,<span class="string">&#x27;穿越火线&#x27;</span>,<span class="string">&#x27;劲舞团&#x27;</span>,<span class="string">&#x27;超级玛丽&#x27;</span>]</span><br><span class="line">               &#125;</span><br><span class="line">     &#125;,</span><br><span class="line">     &#125;</span><br></pre></td></tr></table></figure>

<br/>



<ul>
<li><p>父组件要使用 <strong style="color:blue"> template</strong>标签<strong>包裹插入的j结构</strong></p>
<blockquote>
<p>&lt; strong style&#x3D;”color:blue”&gt;scope&lt;&#x2F; strong&gt; &#x3D; “scopeDataName”  接收传递回来的数据</p>
<p>scopeDataName <strong>名字无任何要求</strong></p>
<p>当 scopeDataName 是一个对象，使用 scope&#x3D;”{对象(names)}”进行 解构赋值 直接获取对象值</p>
</blockquote>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;template&gt;		</span><br><span class="line">		<span class="language-xml"><span class="tag">&lt;<span class="name">Category</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        			<span class="tag">&lt;<span class="name">template</span> <span class="attr">scope</span>=<span class="string">&quot;scopeData&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        				<span class="comment">&lt;!-- 生成的是ul列表 --&gt;</span></span></span><br><span class="line"><span class="language-xml">        				<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        					<span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;g in scopeData.games&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;g&quot;</span>&gt;</span>&#123;&#123;g&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        				<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        			<span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        		<span class="tag">&lt;/<span class="name">Category</span>&gt;</span></span></span><br><span class="line">        </span><br><span class="line">        		<span class="language-xml"><span class="tag">&lt;<span class="name">chen</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        			<span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">&quot;&#123;games&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        				<span class="comment">&lt;!-- 生成的是h4标题 --&gt;</span></span></span><br><span class="line"><span class="language-xml">        				<span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-for</span>=<span class="string">&quot;g in games&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;g&quot;</span>&gt;</span>&#123;&#123;g&#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        			<span class="tag">&lt;/<span class="name">template</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        		<span class="tag">&lt;/<span class="name">chen</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h1 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h1><p><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/image-20230409163041846.png" alt="image-20230409163041846"></p>
<br/>

<ul>
<li>安装 – 注意vue2版本要求 – (插件)</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment">#Vue2 --&gt; vuex 3.+</span></span><br><span class="line">npm i vuex@3</span><br><span class="line"><span class="comment">#Vue3 --&gt; vuex 4.+</span></span><br><span class="line">npm i vuex</span><br></pre></td></tr></table></figure>

<br/>

<h2 id="搭建环境"><a href="#搭建环境" class="headerlink" title="搭建环境"></a>搭建环境</h2><h3 id="1-创建配置项"><a href="#1-创建配置项" class="headerlink" title="1.创建配置项"></a>1.创建配置项</h3><blockquote>
<p>（文档推荐）assets下创建 store 文件夹，创建index.js</p>
<p>该文件用于创建<strong>Vuex中最核心的store</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">    <span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//引入Vuex</span></span><br><span class="line">    <span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line">    <span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"></span><br><span class="line">-------------------------------------------------------</span><br><span class="line">    <span class="comment">//准备actions -- 用于响应组件中的动作</span></span><br><span class="line">    <span class="keyword">const</span> actions=&#123; &#125;</span><br><span class="line">    <span class="comment">//准备mutations -- 用于操纵数据(state)</span></span><br><span class="line">    <span class="keyword">const</span> mutations=&#123; &#125;</span><br><span class="line">    <span class="comment">//准备state -- 用于存储数据   </span></span><br><span class="line">    <span class="keyword">const</span> state=&#123; &#125;</span><br><span class="line">-------------------------------------------------------</span><br><span class="line"></span><br><span class="line">    <span class="comment">//创建并导出store</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">        actions,</span><br><span class="line">        mutations,</span><br><span class="line">        state</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    <span class="comment">//导出store</span></span><br><span class="line">    <span class="comment">// export default store</span></span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<hr>
<h3 id="2-传入配置项"><a href="#2-传入配置项" class="headerlink" title="2.传入配置项"></a>2.传入配置项</h3><ul>
<li>在 <strong>main.js</strong> 中创建vm时传入<strong style="color:blue"> <strong>store</strong> </strong>配置项</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//引入store</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">  store,</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<hr>
<h3 id="3-简单实操"><a href="#3-简单实操" class="headerlink" title="3.简单实操"></a>3.简单实操</h3><h4 id="1、存储变量"><a href="#1、存储变量" class="headerlink" title="1、存储变量"></a>1、存储变量</h4><ul>
<li>（index.js）在store的<strong style="color:blue"> state </strong>中</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//准备state -- 用于存储数据   </span></span><br><span class="line"><span class="keyword">const</span> state=&#123; </span><br><span class="line">     <span class="attr">sum</span>:<span class="number">0</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br/>

<h4 id="2、获取存储的变量"><a href="#2、获取存储的变量" class="headerlink" title="2、获取存储的变量"></a>2、获取存储的变量</h4><ul>
<li>组件插值语法中直接使用 <strong style="color:blue">  this.$store.state.dataname </strong> 获取store中的数据  （可省略this）<strong style="color:blue"> $store.state.dataname </strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&#123;&#123; <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">state</span>.<span class="property">sum</span> &#125;&#125;</span><br><span class="line">&#123;&#123; $store.<span class="property">state</span>.<span class="property">sum</span> &#125;&#125;</span><br></pre></td></tr></table></figure>

<br/>

<h4 id="3-调用修改变量"><a href="#3-调用修改变量" class="headerlink" title="3.调用修改变量"></a>3.调用修改变量</h4><ul>
<li><p><strong style="color:blue"> this.$store.</strong></p>
</li>
<li><p>调用 <strong>actions</strong> 中方法使用<strong style="color:blue"> dispatch</strong></p>
<blockquote>
<p>this.$store.dispatch(‘方法name’,数据)</p>
</blockquote>
</li>
<li><p>调用 <strong>mutations</strong> 中方法使用<strong style="color:blue">commit </strong>  –  可<strong>跳过dispatch</strong>直接进行数据操纵</p>
<blockquote>
<p>this.$store.commit(‘方法name’,数据)</p>
</blockquote>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line">     <span class="title function_">increment</span>(<span class="params"></span>)&#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;jia&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>)</span><br><span class="line">     &#125;,</span><br><span class="line">     <span class="title function_">decrement</span>(<span class="params"></span>)&#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;JIAN&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>)</span><br><span class="line">     &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<br/>

<h4 id="4-设置响应动作和操纵数据"><a href="#4-设置响应动作和操纵数据" class="headerlink" title="4.设置响应动作和操纵数据"></a>4.设置响应动作和操纵数据</h4><ul>
<li>store - index.js</li>
<li><strong style="color:blue">actions</strong>  – 用于响应组件中的动作</li>
</ul>
<blockquote>
<ul>
<li><p>要想被调用使用 <strong style="color:blue">.dispatch</strong></p>
</li>
<li><p>在actions中引用自身方法：context.dispatch(‘方法’，值)</p>
</li>
<li><p><strong style="color:blue">传话</strong> ：其中的方法不对数据进行操纵修改，它会 <strong style="color:blue"> 调用 mutations  </strong>中的方法进行对数据操纵修改</p>
</li>
<li><p>其中的方法(context,value): </p>
</li>
<li><p><strong style="color:blue">context</strong> 为上下文 ，使用 <strong style="color:blue">.commit</strong> 方法进行调用 <strong>mutations</strong> 中的方法 – context.commit(‘mutations中的方法名’,读取实例获取的值)</p>
</li>
</ul>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//准备actions</span></span><br><span class="line">   <span class="keyword">const</span> actions=&#123; </span><br><span class="line">       <span class="title function_">jia</span>(<span class="params">context,value</span>)&#123;</span><br><span class="line">           context.<span class="title function_">commit</span>(<span class="string">&#x27;JIA&#x27;</span>,value)</span><br><span class="line">           <span class="comment">//引用自身actions中方法</span></span><br><span class="line">           context.<span class="title function_">dispatch</span>(<span class="string">&#x27;jian&#x27;</span>,value)</span><br><span class="line">       &#125;,</span><br><span class="line">       <span class="title function_">jian</span>(<span class="params">context,value</span>)&#123;</span><br><span class="line">           context.<span class="title function_">commit</span>(<span class="string">&#x27;JIAN&#x27;</span>,value)</span><br><span class="line">       &#125;,</span><br><span class="line">   &#125;</span><br><span class="line">   </span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li><strong style="color:blue">mutations </strong>– <strong>具体实现</strong>– 用于操纵 <strong>state</strong> 中的数据</li>
</ul>
<blockquote>
<p><strong>操纵数据具体实现步骤</strong>，要被想调用则使用 ：<strong style="color:blue">.commit</strong></p>
<p>**方法(state,value)**：获取state的数据：<strong style="color:blue">.state.data_name</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//准备mutations</span></span><br><span class="line">  <span class="keyword">const</span> mutations=&#123;</span><br><span class="line">      <span class="title function_">JIA</span>(<span class="params">state,value</span>)&#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;mutations&#x27;</span>);</span><br><span class="line">          state.<span class="property">sum</span>+=value</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="title function_">JIAN</span>(<span class="params">state,value</span>)&#123;</span><br><span class="line">          <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;mutations&#x27;</span>);</span><br><span class="line">          state.<span class="property">sum</span>-=value</span><br><span class="line">      &#125;,</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h2 id="Vuex-模块化"><a href="#Vuex-模块化" class="headerlink" title="Vuex 模块化"></a>Vuex 模块化</h2><ul>
<li><p>开启命名空间：<strong style="color:blue">namespace:ture</strong></p>
</li>
<li><p>目的：让代码更好维护，让多种数据分类更加明确。</p>
</li>
</ul>
<br/>

<blockquote>
<ul>
<li>修改<code>store.js</code></li>
</ul>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> countAbout = &#123;</span><br><span class="line">  <span class="attr">namespaced</span>:<span class="literal">true</span>,<span class="comment">//开启命名空间</span></span><br><span class="line">  <span class="attr">state</span>:&#123;<span class="attr">x</span>:<span class="number">1</span>&#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123; ... &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123; ... &#125;,</span><br><span class="line">  <span class="attr">getters</span>: &#123;</span><br><span class="line">    <span class="title function_">bigSum</span>(<span class="params">state</span>)&#123;</span><br><span class="line">       <span class="keyword">return</span> state.<span class="property">sum</span> * <span class="number">10</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> personAbout = &#123;</span><br><span class="line">  <span class="attr">namespaced</span>:<span class="literal">true</span>,<span class="comment">//开启命名空间</span></span><br><span class="line">  <span class="attr">state</span>:&#123; ... &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123; ... &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<br/>

<blockquote>
<ul>
<li>导出</li>
</ul>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">     <span class="attr">modules</span>: &#123;</span><br><span class="line">          <span class="attr">countAbout</span>:countAbout,</span><br><span class="line">          personAbout</span><br><span class="line">     &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<br/>



<ul>
<li>开启命名空间后，组件中读取<strong>state</strong>数据：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接读取</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">state</span>.<span class="property">personAbout</span>.<span class="property">list</span></span><br><span class="line"><span class="comment">//方式二：借助mapState读取：</span></span><br><span class="line">...<span class="title function_">mapState</span>(<span class="string">&#x27;countAbout&#x27;</span>,[<span class="string">&#x27;sum&#x27;</span>,<span class="string">&#x27;school&#x27;</span>,<span class="string">&#x27;subject&#x27;</span>]),</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>开启命名空间后，组件中读取<strong>getters</strong>数据：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接读取</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">getters</span>[<span class="string">&#x27;personAbout/firstPersonName&#x27;</span>]</span><br><span class="line"><span class="comment">//方式二：借助mapGetters读取：</span></span><br><span class="line">...<span class="title function_">mapGetters</span>(<span class="string">&#x27;countAbout&#x27;</span>,[<span class="string">&#x27;bigSum&#x27;</span>])</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>开启命名空间后，组件中调用<strong>dispatch</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接dispatch</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;personAbout/addPersonWang&#x27;</span>,person)</span><br><span class="line"><span class="comment">//方式二：借助mapActions：</span></span><br><span class="line">...<span class="title function_">mapActions</span>(<span class="string">&#x27;countAbout&#x27;</span>,&#123;<span class="attr">incrementOdd</span>:<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="attr">incrementWait</span>:<span class="string">&#x27;jiaWait&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>开启命名空间后，组件中调用<strong>commit</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接commit  /</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;personAbout/ADD_PERSON&#x27;</span>,person)</span><br><span class="line"><span class="comment">//方式二：借助mapMutations：</span></span><br><span class="line">...<span class="title function_">mapMutations</span>(<span class="string">&#x27;countAbout&#x27;</span>,&#123;<span class="attr">increment</span>:<span class="string">&#x27;JIA&#x27;</span>,<span class="attr">decrement</span>:<span class="string">&#x27;JIAN&#x27;</span>&#125;),</span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h2 id="全局计算属性"><a href="#全局计算属性" class="headerlink" title="全局计算属性"></a>全局计算属性</h2><h3 id="1-getters-配置项"><a href="#1-getters-配置项" class="headerlink" title="1.getters 配置项"></a>1.getters 配置项</h3><ul>
<li>当state中的数据需要加工后再使用时，使用 <strong style="color:blue">getters</strong> 加工：</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//追加 getters 配置项</span></span><br><span class="line"><span class="keyword">const</span> getters=&#123;</span><br><span class="line">    <span class="title function_">bigSum</span>(<span class="params">state</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> state.<span class="property">sum</span>*<span class="number">10</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//追加创建并导出store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">     ...</span><br><span class="line">    getters</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>调用store里面getters数据 – <strong style="color:blue">$store.getters.数据</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//获取getters返回的值</span></span><br><span class="line">&#123;&#123;<span class="variable language_">this</span>.<span class="property">$store</span>.<span class="property">getters</span>.<span class="property">bigSum</span> &#125;&#125;</span><br><span class="line">&#123;&#123;$store.<span class="property">getters</span>.<span class="property">bigSum</span> &#125;&#125;</span><br></pre></td></tr></table></figure>

<br/>

<h3 id="2-mapGetters-–-获取getters数据"><a href="#2-mapGetters-–-获取getters数据" class="headerlink" title="2.mapGetters – 获取getters数据"></a>2.mapGetters – 获取getters数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;h2&gt;当前值：&#123;&#123; bigSum &#125;&#125;&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;mapGetters, mapState&#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="attr">computed</span>:&#123;</span><br><span class="line"><span class="comment">//借助mapState生成计算属性，从state中读取数据。（对象写法）</span></span><br><span class="line">     ...<span class="title function_">mapState</span>(&#123;<span class="attr">bigSum</span>:<span class="string">&#x27;bigSum&#x27;</span>&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//借助mapGetters生成计算属性，从state中读取数据。（数组写法。要求键名和值名相同=&gt;简写）</span></span><br><span class="line">     ...<span class="title function_">mapGetters</span>([<span class="string">&#x27;bigSum&#x27;</span>])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br/>

<h3 id="3-mapState-–-获取state数据"><a href="#3-mapState-–-获取state数据" class="headerlink" title="3.mapState – 获取state数据"></a>3.mapState – 获取state数据</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;h2&gt;&#123;&#123; sum &#125;&#125;&#123;&#123; school &#125;&#125;&#123;&#123; c &#125;&#125;&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;mapGetters, mapState&#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="attr">computed</span>:&#123;</span><br><span class="line">     <span class="comment">//借助mapState生成计算属性，从state中读取数据。（对象写法）</span></span><br><span class="line">      ...<span class="title function_">mapState</span>(&#123;<span class="attr">sum</span>:<span class="string">&#x27;sum&#x27;</span>,<span class="attr">school</span>:<span class="string">&#x27;school&#x27;</span>,<span class="attr">c</span>:<span class="string">&#x27;age&#x27;</span>&#125;)</span><br><span class="line"></span><br><span class="line">     <span class="comment">//借助mapState生成计算属性，从state中读取数据。（数组写法。要求键名和值名相同=&gt;简写）</span></span><br><span class="line">     ...<span class="title function_">mapState</span>([<span class="string">&#x27;sum&#x27;</span>,<span class="string">&#x27;school&#x27;</span>,<span class="string">&#x27;age&#x27;</span>]),</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h2 id="map生成方法"><a href="#map生成方法" class="headerlink" title="map生成方法"></a>map生成方法</h2><h3 id="1-mapMutations-–-commit"><a href="#1-mapMutations-–-commit" class="headerlink" title="1.mapMutations – commit"></a>1.mapMutations – commit</h3><ul>
<li>使用  this.$store.commit  写法时，方法触发不需要传值在触发位置传值</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;button @click=<span class="string">&quot;increment&quot;</span>&gt;+&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line"><span class="comment">//自己写方法进行调用</span></span><br><span class="line">     <span class="title function_">increment</span>(<span class="params"></span>)&#123;</span><br><span class="line">     	<span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;JIA&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>)</span><br><span class="line">&#125;,</span><br><span class="line">     <span class="title function_">decrement</span>(<span class="params"></span>)&#123;</span><br><span class="line">     	<span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">commit</span>(<span class="string">&#x27;JIAN&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li><strong>…mapMutations</strong> 写法需要写入<strong>传值 <strong>给</strong>mutayions</strong>方法使用</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;increment(n)&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;decrement(n)&quot;</span>&gt;</span>-<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    (数组写法)</span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;JIA(n)&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations</span></span><br><span class="line">...<span class="title function_">mapMutations</span>(&#123;<span class="attr">increment</span>:<span class="string">&#x27;JIA&#x27;</span>,<span class="attr">decrement</span>:<span class="string">&#x27;jian&#x27;</span>&#125;),</span><br><span class="line"></span><br><span class="line"><span class="comment">//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)</span></span><br><span class="line">...<span class="title function_">mapMutations</span>([<span class="string">&#x27;JIA&#x27;</span>,<span class="string">&#x27;JIA&#x27;</span>]),    </span><br></pre></td></tr></table></figure>

<p><br/><br/></p>
<h3 id="2-mapActions–-dispatch"><a href="#2-mapActions–-dispatch" class="headerlink" title="2.mapActions– dispatch"></a>2.mapActions– dispatch</h3><ul>
<li>使用  <strong>this.$store.dispatch</strong>写法时，方法触发不需要传值在触发位置传值</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- this.$store.commit 写法不需要传值 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;increment&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line"></span><br><span class="line"><span class="comment">//自己写方法进行调用</span></span><br><span class="line"><span class="title function_">increment0dd</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>)</span><br><span class="line">&#125;,</span><br><span class="line"><span class="title function_">incrementWait</span>(<span class="params"></span>)&#123;	</span><br><span class="line">     <span class="variable language_">this</span>.<span class="property">$store</span>.<span class="title function_">dispatch</span>(<span class="string">&#x27;jiaWait&#x27;</span>,<span class="variable language_">this</span>.<span class="property">n</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li><strong>…mapActions</strong> 写法需要写入**传值 **给 <strong>actions</strong> 的方法使用</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;!-- mapActions 写法需要传值 --&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;increment0dd(n)&quot;</span>&gt;</span>+<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;incrementWait(n)&quot;</span>&gt;</span>-<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">   (数组写法)</span><br><span class="line">   &lt;button @click=<span class="string">&quot;jiaOdd(n)&quot;</span>&gt;+&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">methods</span>:&#123;</span><br><span class="line"></span><br><span class="line"><span class="comment">//借助mapActions生成对应的方法，方法中会调用commit去联系mutations</span></span><br><span class="line">...<span class="title function_">mapActions</span>(&#123;<span class="attr">increment0dd</span>:<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="attr">incrementWait</span>:<span class="string">&#x27;jiaWait&#x27;</span>&#125;),</span><br><span class="line"></span><br><span class="line"><span class="comment">//借助mapActions生成对应的方法，方法中会调用commit去联系mutations(数组写法)</span></span><br><span class="line">...<span class="title function_">mapActions</span>([<span class="string">&#x27;jiaOdd&#x27;</span>,<span class="string">&#x27;jiaWait&#x27;</span>]),</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<br/>

<br/>

<hr>
<h1 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h1><h2 id="1-安装–引入–应用"><a href="#1-安装–引入–应用" class="headerlink" title="1.安装–引入–应用"></a>1.安装–引入–应用</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment">#vue2 --安装路由插件 -  vue-router@3</span></span><br><span class="line">npm i vue-router@3</span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>main.js</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//引入VueRouter插件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="comment">//应用插件</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueRouter</span>)</span><br></pre></td></tr></table></figure>



<p><br/><br/></p>
<h2 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h2><p>①main.js</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>),</span><br><span class="line">  <span class="attr">router</span>:router,</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<br/>	

<p>②创建文件夹（router）– 创建 （name) index.js</p>
<ul>
<li>该文件专门用于创建整个应用的路由器</li>
</ul>
<p>							</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">VueRouter</span> <span class="keyword">from</span> <span class="string">&quot;vue-router&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//引入组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">About</span> <span class="keyword">from</span> <span class="string">&#x27;../components/About&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Home</span> <span class="keyword">from</span> <span class="string">&#x27;../components/Home&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建一个路由器并导出</span></span><br><span class="line"><span class="comment">// const router = new VueRouter</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">    <span class="attr">routes</span>:[</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">path</span>:<span class="string">&#x27;/about&#x27;</span>,</span><br><span class="line">            <span class="attr">component</span>:<span class="title class_">About</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">path</span>:<span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">            <span class="attr">component</span>:<span class="title class_">Home</span></span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<br/>

<p>​	③跳转设置</p>
<ul>
<li><p>Vue中借助 <strong style="color:blue"> router-link (等价于html中的 a 标签)</strong>标签实现路由跳转</p>
<blockquote>
<p>标签内使用<strong style="color:blue"> to&#x3D;”path”</strong> 来指定跳转组件</p>
</blockquote>
<br/>
</li>
<li><p>激活属性：<strong style="color:blue"> active-class&#x3D;”active”</strong> – 被选中激活高亮</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">class</span>=<span class="string">&quot;list-group-item&quot;</span>  <span class="attr">active-class</span>=<span class="string">&quot;active&quot;</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>AboutV<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">class</span>=<span class="string">&quot;list-group-item&quot;</span>  <span class="attr">active-class</span>=<span class="string">&quot;active&quot;</span> <span class="attr">to</span>=<span class="string">&quot;/home&quot;</span>&gt;</span>HomeV<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure>

<br/>

<ul>
<li>在指定位置展示路由跳转显示的组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">辰</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2023/04/06/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/">http://example.com/2023/04/06/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">C·辰</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"><div class="social-share" data-image="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/vues.jpeg" data-sites="wechat,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/04/05/Vue-%E5%9F%BA%E7%A1%80/" title="Vue-基础"><img class="cover" src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Vue.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Vue-基础</div></div></a></div><div class="next-post pull-right"><a href="/2023/04/06/%E6%9C%8D%E5%8A%A1%E5%99%A8/" title="阿里服务器&amp;图床"><img class="cover" src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/ali.gif" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">阿里服务器&amp;图床</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2023/04/05/Vue-%E5%9F%BA%E7%A1%80/" title="Vue-基础"><img class="cover" src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Vue.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2023-08-25</div><div class="title">Vue-基础</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog%2Fimages%2Favatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">辰</div><div class="author-info__description">车遥马慢</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">32</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">28</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://gitee.com/hchenp"><i class="fab fa-github"></i><span>Gitee-HchenP</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/hchenp" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="https://github.com/Pxlchen?tab=projects" target="_blank" title="CSDN"><i class="fa fa-book-open"></i></a><a class="social-icon" href="https://console.cloud.tencent.com/cos/bucket?bucket=chen-1317386995&amp;region=ap-guangzhou&amp;isPublic=true" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="mailto:1107383160@qq.com" target="_blank" title="Email"><i class="fas fa-envelope-open-text"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">C2C-Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E6%A1%A3"><span class="toc-number">1.</span> <span class="toc-text">文档</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B"><span class="toc-number">2.</span> <span class="toc-text">Vue组件化编程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8"><span class="toc-number">3.</span> <span class="toc-text">开发常用</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="toc-number">4.</span> <span class="toc-text">脚手架</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84"><span class="toc-number">5.</span> <span class="toc-text">脚手架文件结构</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%9D%9E%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6"><span class="toc-number">6.</span> <span class="toc-text">非单文件组件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#ref-id%E6%9B%BF%E4%BB%A3%E8%80%85-%E2%80%93%E7%BB%91%E5%AE%9ADom"><span class="toc-number">7.</span> <span class="toc-text">ref (id替代者)–绑定Dom</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E4%B8%8D%E5%90%8C%E7%89%88%E6%9C%AC%E7%9A%84Vue"><span class="toc-number">8.</span> <span class="toc-text">关于不同版本的Vue</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vue-config-js%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">9.</span> <span class="toc-text">vue.config.js配置文件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E8%AE%AF"><span class="toc-number">10.</span> <span class="toc-text">组件间通讯</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E3%80%81props-%E2%80%93-%E8%B7%A8%E7%BB%84%E4%BB%B6%E4%BC%A0%E6%95%B0%E6%8D%AE"><span class="toc-number">10.1.</span> <span class="toc-text">一、props – 跨组件传数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E3%80%81-%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6-%E2%80%93ref"><span class="toc-number">10.2.</span> <span class="toc-text">二、*组件自定义事件 –ref</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E3%80%81-v-on-name-x3D-%E2%80%99name%E2%80%99"><span class="toc-number">10.2.1.</span> <span class="toc-text">1、   v-on :name&#x3D;’name’  </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2%E3%80%81-ref"><span class="toc-number">10.2.2.</span> <span class="toc-text">2、  ref</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2%E3%80%81-%E8%A7%A6%E5%8F%91-emit"><span class="toc-number">10.2.3.</span> <span class="toc-text">2、 触发   $emit </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3%E3%80%81%E8%A7%A3%E7%BB%91-%E2%80%93-off"><span class="toc-number">10.2.4.</span> <span class="toc-text">3、解绑 – $off</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%95%B0%E6%8D%AE%E4%BC%A0%E9%80%92-%E2%80%93-%E5%AD%90%E4%BC%A0%E7%88%B6"><span class="toc-number">10.3.</span> <span class="toc-text">三、数据传递 – 子传父</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%E2%80%93bus"><span class="toc-number">10.4.</span> <span class="toc-text">四、全局事件总线–bus</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E3%80%81%E5%AE%89%E8%A3%85%E5%85%A8%E5%B1%80%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF"><span class="toc-number">10.4.1.</span> <span class="toc-text">1、安装全局事件总线</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2%E3%80%81%E6%8E%A5%E6%94%B6%E6%95%B0%E6%8D%AE"><span class="toc-number">10.4.2.</span> <span class="toc-text">2、接收数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3%E3%80%81%E6%8F%90%E4%BE%9B%E6%95%B0%E6%8D%AE"><span class="toc-number">10.4.3.</span> <span class="toc-text">3、提供数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4%E3%80%81%E9%94%80%E6%AF%81"><span class="toc-number">10.4.4.</span> <span class="toc-text">4、销毁</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E6%B6%88%E6%81%AF%E8%AE%A2%E9%98%85%E4%B8%8E%E5%8F%91%E5%B8%83-%EF%BC%88pubsub%EF%BC%89"><span class="toc-number">10.5.</span> <span class="toc-text">五、消息订阅与发布 （pubsub）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#mixin%E6%B7%B7%E5%85%A5-%E2%80%93-%E5%85%B1%E4%BA%AB%E9%85%8D%E7%BD%AE"><span class="toc-number">11.</span> <span class="toc-text">mixin混入 – 共享配置</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6"><span class="toc-number">12.</span> <span class="toc-text">插件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#scoped-%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB"><span class="toc-number">13.</span> <span class="toc-text">scoped 样式隔离</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8"><span class="toc-number">14.</span> <span class="toc-text">本地存储</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#nextTick"><span class="toc-number">15.</span> <span class="toc-text">nextTick</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%8A%A8%E7%94%BB"><span class="toc-number">16.</span> <span class="toc-text">动画</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%87%E6%B8%A1-%E2%80%93-transition"><span class="toc-number">16.1.</span> <span class="toc-text">过渡 – transition</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%81%E8%A3%85%E8%BF%87%E6%B8%A1"><span class="toc-number">16.2.</span> <span class="toc-text">封装过渡</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B0%81%E8%A3%85%E5%8A%A8%E7%94%BB"><span class="toc-number">16.3.</span> <span class="toc-text">封装动画</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#vue%E8%84%9A%E6%89%8B%E6%9E%B6%E9%85%8D%E7%BD%AE%E4%BB%A3%E7%90%86-%E2%80%93-axios"><span class="toc-number">17.</span> <span class="toc-text">vue脚手架配置代理  – axios</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%B8%80"><span class="toc-number">17.1.</span> <span class="toc-text">方法一</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E6%B3%95%E4%BA%8C"><span class="toc-number">17.2.</span> <span class="toc-text">方法二</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Github%E6%A1%88%E4%BE%8B-%E2%80%93-axios"><span class="toc-number">18.</span> <span class="toc-text">Github案例  – axios</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%83%E7%94%A8Github%E6%8E%A5%E5%8F%A3"><span class="toc-number">18.1.</span> <span class="toc-text">调用Github接口</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-resource"><span class="toc-number">19.</span> <span class="toc-text">Vue-resource</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%8F%92%E6%A7%BD-slot"><span class="toc-number">20.</span> <span class="toc-text">插槽 slot</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vuex"><span class="toc-number">21.</span> <span class="toc-text">Vuex</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E7%8E%AF%E5%A2%83"><span class="toc-number">21.1.</span> <span class="toc-text">搭建环境</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%88%9B%E5%BB%BA%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="toc-number">21.1.1.</span> <span class="toc-text">1.创建配置项</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BC%A0%E5%85%A5%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="toc-number">21.1.2.</span> <span class="toc-text">2.传入配置项</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E7%AE%80%E5%8D%95%E5%AE%9E%E6%93%8D"><span class="toc-number">21.1.3.</span> <span class="toc-text">3.简单实操</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1%E3%80%81%E5%AD%98%E5%82%A8%E5%8F%98%E9%87%8F"><span class="toc-number">21.1.3.1.</span> <span class="toc-text">1、存储变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2%E3%80%81%E8%8E%B7%E5%8F%96%E5%AD%98%E5%82%A8%E7%9A%84%E5%8F%98%E9%87%8F"><span class="toc-number">21.1.3.2.</span> <span class="toc-text">2、获取存储的变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E8%B0%83%E7%94%A8%E4%BF%AE%E6%94%B9%E5%8F%98%E9%87%8F"><span class="toc-number">21.1.3.3.</span> <span class="toc-text">3.调用修改变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%AE%BE%E7%BD%AE%E5%93%8D%E5%BA%94%E5%8A%A8%E4%BD%9C%E5%92%8C%E6%93%8D%E7%BA%B5%E6%95%B0%E6%8D%AE"><span class="toc-number">21.1.3.4.</span> <span class="toc-text">4.设置响应动作和操纵数据</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Vuex-%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">21.2.</span> <span class="toc-text">Vuex 模块化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7"><span class="toc-number">21.3.</span> <span class="toc-text">全局计算属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-getters-%E9%85%8D%E7%BD%AE%E9%A1%B9"><span class="toc-number">21.3.1.</span> <span class="toc-text">1.getters 配置项</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-mapGetters-%E2%80%93-%E8%8E%B7%E5%8F%96getters%E6%95%B0%E6%8D%AE"><span class="toc-number">21.3.2.</span> <span class="toc-text">2.mapGetters – 获取getters数据</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-mapState-%E2%80%93-%E8%8E%B7%E5%8F%96state%E6%95%B0%E6%8D%AE"><span class="toc-number">21.3.3.</span> <span class="toc-text">3.mapState – 获取state数据</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map%E7%94%9F%E6%88%90%E6%96%B9%E6%B3%95"><span class="toc-number">21.4.</span> <span class="toc-text">map生成方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-mapMutations-%E2%80%93-commit"><span class="toc-number">21.4.1.</span> <span class="toc-text">1.mapMutations – commit</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-mapActions%E2%80%93-dispatch"><span class="toc-number">21.4.2.</span> <span class="toc-text">2.mapActions– dispatch</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1"><span class="toc-number">22.</span> <span class="toc-text">路由</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%AE%89%E8%A3%85%E2%80%93%E5%BC%95%E5%85%A5%E2%80%93%E5%BA%94%E7%94%A8"><span class="toc-number">22.1.</span> <span class="toc-text">1.安装–引入–应用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%85%8D%E7%BD%AE"><span class="toc-number">22.2.</span> <span class="toc-text">2.配置</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/07/06/Java%E5%85%AB%E8%82%A1%E6%96%87/" title="Java八股文"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/javaall.gif" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java八股文"/></a><div class="content"><a class="title" href="/2023/07/06/Java%E5%85%AB%E8%82%A1%E6%96%87/" title="Java八股文">Java八股文</a><time datetime="2023-07-06T14:22:22.000Z" title="发表于 2023-07-06 22:22:22">2023-07-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/07/06/%E5%90%8E%E7%AB%AF%E8%A7%84%E5%88%92/" title="Java后端"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/javahd.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java后端"/></a><div class="content"><a class="title" href="/2023/07/06/%E5%90%8E%E7%AB%AF%E8%A7%84%E5%88%92/" title="Java后端">Java后端</a><time datetime="2023-07-06T14:22:22.000Z" title="发表于 2023-07-06 22:22:22">2023-07-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/06/02/MybatisPlus/" title="MybatisPlus"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/mybatisplus.svg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="MybatisPlus"/></a><div class="content"><a class="title" href="/2023/06/02/MybatisPlus/" title="MybatisPlus">MybatisPlus</a><time datetime="2023-06-02T14:22:22.000Z" title="发表于 2023-06-02 22:22:22">2023-06-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/05/05/Linux/" title="Linux"><img src= "" data-lazy-src="/img/loading.gif" data-original="https://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Linux.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Linux"/></a><div class="content"><a class="title" href="/2023/05/05/Linux/" title="Linux">Linux</a><time datetime="2023-05-05T14:22:22.000Z" title="发表于 2023-05-05 22:22:22">2023-05-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/05/05/Redis/" title="Redis"><img src= "" data-lazy-src="/img/loading.gif" data-original="ttps://chen-1317386995.cos.ap-guangzhou.myqcloud.com/Blog/images/Redis.jpeg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Redis"/></a><div class="content"><a class="title" href="/2023/05/05/Redis/" title="Redis">Redis</a><time datetime="2023-05-05T14:22:22.000Z" title="发表于 2023-05-05 22:22:22">2023-05-05</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 辰</div><div class="framework-info"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">粤ICP备2023096650号</a><span class="footer-separator">|</span><a target="_blank" rel="noopener" href="http://hchen.cloud">hchen.cloud</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(r){r.imageLazyLoadSetting.processImages=t;var e=r.imageLazyLoadSetting.isSPA,n=r.imageLazyLoadSetting.preloadRatio||1,c=a();function a(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){e&&(c=a());for(var t,o=0;o<c.length;o++)0<=(t=(t=c[o]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(r.innerHeight*n||document.documentElement.clientHeight*n)&&function(){var t,e,n,a,i=c[o];e=function(){c=c.filter(function(t){return i!==t}),r.imageLazyLoadSetting.onImageLoaded&&r.imageLazyLoadSetting.onImageLoaded(i)},(t=i).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,a=t.getAttribute("data-original"),n.onload=function(){t.src=a,t.removeAttribute("data-original"),e&&e()},t.src!==a&&(n.src=a))}()}function i(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",i),r.addEventListener("resize",i),r.addEventListener("orientationchange",i)}(this);</script></body></html>